<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <f:view contentType="text/html">

        <h:head>
            <f:facet name="first">
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
                <title>Pizza Store</title>
            </f:facet>

            <!--[if IE]>
                    <link rel="stylesheet" type="text/css" href="#{request.contextPath}/resources/css/theme/style.ie.css" />		
            <![endif]-->
            <!--[if IE 7]>
                    <link rel="stylesheet" type="text/css" href="#{request.contextPath}/resources/css/theme/style.ie7.css" />		
            <![endif]-->
            <link rel="shortcut icon" href="#{request.contextPath}/resources/css/theme/images/favicon.ico" type="image/x-icon" />


            <style type="text/css">



                body { font-family:Lucida Sans, Lucida Sans Unicode, Arial, Sans-Serif; font-size:13px; margin:0px auto;}
                #tabs { margin:0; padding:0; list-style:none; overflow:hidden; }
                #tabs li { float:left; display:block; padding:5px; background-color:#bbb; margin-right:5px;}
                #tabs li a { color:#fff; text-decoration:none; }
                #tabs li.current { background-color:#e1e1e1;}
                #tabs li.current a { color:#000; text-decoration:none; }
                #tabs li a.remove { color:#f00; margin-left:10px;}
                #content { background-color:#e1e1e1;}
                #content p { margin: 0; padding:20px 20px 100px 20px;}

                #main { width:900px; margin:0px auto; overflow:hidden;background-color:#F6F6F6; margin-top:20px;
                        -moz-border-radius:10px;  -webkit-border-radius:10px; padding:30px;}
                #wrapper, #doclist { float:left; margin:0 20px 0 0;}
                #doclist { width:150px; border-right:solid 1px #dcdcdc;}
                #doclist ul { margin:0; list-style:none;}
                #doclist li { margin:10px 0; padding:0;}
                #documents { margin:0; padding:0;}

                #wrapper { width:700px; margin-top:20px;}

                #header{ background-color:#F6F6F6; width:900px; margin:0px auto; margin-top:20px;
                         -moz-border-radius:10px;  -webkit-border-radius:10px; padding:30px; position:relative;}
                #header h2 {font-size:16px; font-weight:normal; margin:0px; padding:0px;}

            </style>

        </h:head> 
        <h:body>
            <h:outputScript library="primefaces" name="jquery/jquery.js" target="head" />
            <h:outputScript library="primefaces" name="jquery/jquery-plugins.js" target="head"  />
            <h:outputScript library="js" name="primefaces.spanish.locale.js" target="body" />
            <p:ajaxStatus onstart="PF('statusDialog').show()" oncomplete="PF('statusDialog').hide()"/>



            <script type="text/javascript">
                //<![CDATA[

                $(document).ready(function() {

                    $('#tabs').on('click', 'a.tab', function() {
                        // Get the tab name
                        var contentname = $(this).attr("id") + "_content";
                        var iframeid = $(this).attr("id") + "_iframe";

                        // hide all other tabs
                        $("#content p").hide();
                        $("#tabs li").removeClass("current");
                        
                        //esconde todos los iframe
                        $(".iframe_sup_menu").hide();

                        // show current tab
                        $("#" + contentname).show();
                        $(this).parent().addClass("current");
                        
                        //muestra el iframe actual
                        $("#" + iframeid).show();
                    });

                    $('#tabs').on('click', 'a.remove', function() {
                        // Get the tab name
                        var tabid = $(this).parent().find(".tab").attr("id");

                        //remove the frame
                        $("#" + tabid +"_iframe").remove();
                        
                        // remove tab and related content
                        var contentname = tabid + "_content";
                        $("#" + contentname).remove();
                        $(this).parent().remove();

                        // if there is no current tab and if there are still tabs left, show the first one
                        if ($("#tabs li.current").length == 0 && $("#tabs li").length > 0) {

                            // find the first tab    
                            var lasttab = $("#tabs li:last-child");
                            lasttab.addClass("current");

                            // get its link name and show related content
                            var lasttabid = $(lasttab).find("a.tab").attr("id");
                            $("#" + lasttabid + "_content").show();
                            
                            //mostrar iframe
                             $("#" + lasttabid + "_iframe").show();
                        }
                    });

                });

                function addTab(id, nombre, link) {
                    // If tab already exist in the list, return
                    if ($("#" + id).length !== 0)
                       return;

                    // hide other tabs
                    $("#tabs li").removeClass("current");
                    $("#content p").hide();

                    // add new tab and related content
                    $("#tabs").append("<li class='current'><a class='tab' id='" +id+ "' href='#'>" + nombre +
                            "</a><a href='#' class='remove'>x</a></li>");

                    $("#content").append("<iframe id='"+id+"_iframe' class='iframe_sup_menu' style='width: 746px;height: 843px;' src='"+link+"'></iframe>");

                    //esconde todos los iframe
                    $(".iframe_sup_menu").hide();

                    // set the newly added tab as current
                    $("#" + id + "_content").show();
                    
                    //muestra el iframe actual
                    $("#" + id + "_iframe").show();
                    
                }

//]]>

            </script>

            <div id="main">
                <div id="doclist">
                    <h2>Tabs</h2>
                    <ul id="documents">
                        <li><a href="javascript:void(0)" onclick="addTab('inicio', 'Inicio', '#{request.contextPath}/')" >Inicio</a></li>
                        <li><a href="javascript:void(0)" onclick="addTab('tablatest','Test Tabla' ,'#{request.contextPath}/tablaTest.jsf')" >Test Tabla</a></li>
                        <li><a href="javascript:void(0)" onclick="addTab('proctest','Procedimiento Test' ,'#{request.contextPath}/procedimientoTest.jsf')" >Proc Test</a></li>
                    </ul></div><div id="wrapper">
                    <ul id="tabs">
                        <!-- Tabs go here -->
                    </ul>
                    <div id="content">
                        <!-- Tab content goes here -->
                    </div>
                </div>
            </div>

        </h:body>
    </f:view>
</html>
